<template>
  <el-table :data="props.tableData" style="width: 100%">
    <template v-for="(item, index) in props.columnData">
      <template v-if="item.type == 'img'">
        <el-table-column
          :prop="item.key"
          :label="item.title"
          :width="item.minWidth"
        >
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row[item.key]"
              />
            </div>
          </template>
        </el-table-column>
      </template>
      <slot v-else-if="item.slot" :name="item.slot"></slot>
      <el-table-column
        v-else
        :prop="item.key"
        :label="item.title"
        :width="item.minWidth"
      >
      </el-table-column>
    </template>
  </el-table>
</template>

<script setup>
/**
 * 模块引入
 */
import { reactive, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
let props = defineProps({
  tableData: {
    type: Array,
    default: "",
  },
  columnData: {
    type: Array,
  },
});
/**
 * 数据
 */
const state = reactive({});

/**
 * 功能方法
 */

console.log(props.columnData);
</script>
<style lang="less" scoped></style>
